<template>
    <header class="admin-navbar">
      <div class="navbar-brand">
        <h1>博客系统管理后台</h1>
      </div>
      
      <div class="navbar-actions">
        <div class="user-info" @click="toggleDropdown">
          <img :src="userStore.avatar || '/default-avatar.png'" class="avatar">
          <span>{{ userStore.username }}</span>
          <i class="fas fa-caret-down"></i>
          
          <div v-if="showDropdown" class="dropdown-menu">
            <router-link to="/admin/profile" class="dropdown-item">
              <i class="fas fa-user"></i> 个人资料
            </router-link>
            <div class="dropdown-item" @click="logout">
              <i class="fas fa-sign-out-alt"></i> 退出登录
            </div>
          </div>
        </div>
      </div>
    </header>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useUserStore } from '@/store/user'
  import { useRouter } from 'vue-router'
  
  const userStore = useUserStore()
  const router = useRouter()
  const showDropdown = ref(false)
  
  const toggleDropdown = () => {
    showDropdown.value = !showDropdown.value
  }
  
  const logout = () => {
    userStore.logout()
    router.push('/admin/login')
  }
  </script>
  
  <style scoped>
  .admin-navbar {
    background-color: #2c3e50;
    color: white;
    padding: 0 20px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .navbar-brand h1 {
    margin: 0;
    font-size: 1.2rem;
  }
  
  .user-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
  }
  
  .user-info:hover {
    background-color: rgba(255,255,255,0.1);
  }
  
  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
  }
  
  .dropdown-item {
    padding: 8px 16px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  
  .dropdown-item:hover {
    background-color: #f8f9fa;
  }
  
  .dropdown-item i {
    width: 20px;
    text-align: center;
  }
  </style>